<!--
 * @Description: 图算维护
 * @Author: wangwangwang
 * @Date: 2020-09-21 14:09:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-29 14:50:32
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <div :class="{ 'arrowTransform': !showCardNav, 'arrowTransformReturn': showCardNav}">
              <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
            </div>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav">
            <div class="search">
              <span style="display: inline-block;margin-bottom: 10px;">
                <span style="margin-right: 12px;">合同号</span>
                <el-input v-model="tableParam.contractNo" style="width: 200px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px;">工程名称</span>
                <el-input v-model="tableParam.engineeringName" style="width: 20%;max-width: 200px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px;">客户名称</span>
                <el-input v-model="tableParam.customerName" style="width: 20%;max-width: 200px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left:12px;" @click="init()">重 置</el-button>
            </div>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card">
          <div v-loading="tableLoading" class="card_info" :style="style">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <template v-for="(item, index2) in table">
                <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width">
                  <template slot-scope="scope">
                    <div v-if="item.label == '操作'">
                      <el-button size="mini" class="bottom_one" @click="ToViewFun(scope.row, '修改')">查看</el-button>
                      <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='DAORU'))!==-1" size="mini" class="bottom_one" @click="exportDialogFun(scope.row)">导入</el-button>
                    </div>
                    <span v-else>{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
        </div>
      </el-main>
      <div class="card_bottom">
        <div class="card_bottom_left">
          <div class="top_page_totle">总共{{ total }}条</div>
          <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" :page-sizes="[10, 20, 30, 40,50,100,200,500,1000]" layout="prev,pager,sizes,next,jumper" :total="total" @size-change="sizeChange" @current-change="gettableData()"></el-pagination>
        </div>
        <div>
          <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
        </div>
      </div>
    </el-container>
    <!-- 查看 -->
    <el-dialog v-dialogDrag :visible.sync="ToViewType" width="1000px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">图算详情</span>
      <div class="dialoginfo">
        <div>
          <div style="padding-bottom: 10px;">
            <el-button size="mini" class="bottom_all" style="margin-left: 0;" @click="addFun()">
              <i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
              添加
            </el-button>
          </div>
          <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="toViewList" tooltip-effect="dark">
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column label="结构部位" align="center" width="120" prop="structuralParts"></el-table-column>
            <el-table-column label="标号" align="center" prop="gradeNo" show-overflow-tooltip></el-table-column>
            <el-table-column label="图算量（方）" align="center" prop="graphicNum"></el-table-column>
            <el-table-column label="备注说明" align="center" prop="remark"></el-table-column>
            <el-table-column label="主要结构尺寸" align="center" prop="structureSize"></el-table-column>
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                {{scope.row.planStatus==1?'已计划':'未计划'}}
              </template>
            </el-table-column>
            <el-table-column label="添加人" align="center" prop="createUserName"></el-table-column>
            <el-table-column label="操作" align="left">
              <template slot-scope="scope">
                <el-link class="table_link" :underline="false" @click="upDateFun(scope.row)">编辑</el-link>
                <el-link class="table_link" :underline="false" style="color:red;" @click="deleteFun(scope.row)">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="ToViewType = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 添加 -->
    <el-dialog v-dialogDrag :visible.sync="addDialog" width="1000px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">{{ addDialogTitle }}</span>
      <div class="dialoginfo">
        <el-form ref="reffromDate" :rules="rules" :inline="true" :model="fromDate" label-width="110px">
          <el-form-item prop="structuralParts">
            <span slot="label" style="color:red;">结构部位</span>
            <el-input v-model="fromDate.structuralParts" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <!-- <el-form-item prop="gradeNo" label="标号">
            <el-select v-model="fromDate.gradeNo" filterable placeholder="请选择">
              <el-option v-for="item in strengthGradeList" :key="item.ID" :label="item.name" :value="item.name"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item prop="strengthGrade0">
            <span slot="label" style="color:red;">强度等级</span>
            <el-select v-model="strengthGrade0" placeholder="请选择">
              <el-option v-for="item in strengthGradeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <span slot="label">性能等级</span>
            <el-select v-model="performanceGrade0" multiple placeholder="请选择" @change="$forceUpdate()">
              <el-option v-for="item in performanceGradeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <span slot="label">材料要求</span>
            <el-select v-model="meterialRequirements0" multiple placeholder="请选择" @change="$forceUpdate()">
              <el-option v-for="item in meterialRequirementsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <span slot="label">特殊要求</span>
            <el-select v-model="specialRequirements0" multiple placeholder="请选择" @change="$forceUpdate()">
              <el-option v-for="item in specialRequirementsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <span slot="label">其他要求</span>
            <el-select v-model="otherRequirements0" multiple placeholder="请选择" @change="$forceUpdate()">
              <el-option v-for="item in otherRequirementsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <span slot="label">外加剂要求</span>
            <el-select v-model="admixtureRequirements0" multiple placeholder="请选择" @change="$forceUpdate()">
              <el-option v-for="item in admixtureRequirementsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="graphicNum">
            <span slot="label" style="color:red;">图算量</span>
            <el-input v-model="fromDate.graphicNum" type="Number" placeholder="请输入" :controls="false" style="width:320px;"></el-input>
          </el-form-item>
          <el-form-item prop="planStatus" label="状态">
            <el-select v-model="fromDate.planStatus" placeholder="请选择">
              <el-option label="未计划" :value="0"></el-option>
              <el-option label="已计划" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="remark" label="备注说明">
            <el-input v-model="fromDate.remark" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">主要结构尺寸</span>
            <el-input v-model="fromDate.structureSize" :rows="5" resize="none" style="width: 760px;" type="textarea" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="addDialog = false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 导入 -->
    <el-dialog v-dialogDrag :visible.sync="exportDialog" width="680px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">导入图算：{{titleName}}</span>
      <div v-loading="loading" element-loading-text="数据解析中..." element-loading-background="rgba(0, 0, 0, 0.8)" class="dialoginfo" style="text-align: center;">
        <el-upload class="upload-demo" :on-success="fileSuccess" :before-upload="filebefore" :show-file-list="false" drag action="/icps/system/sign/basics/graphic/importList" name="file" :headers="upheader" :data="dataJson">
          <i slot="trigger" class="el-icon-upload"></i>
          <div slot="trigger" class="el-upload__text">
            将文件拖到此处，或
            <em>点击选取文件</em>
          </div>
        </el-upload>
        <div style="padding-top: 10px;">
          <el-button class="bottom_all" style="margin-left: 0;" @click="load()">下载模板</el-button>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="exportDialog = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import { getDicType } from "@/api/common.js";
import { getToken, } from '@/utils/auth';
import {
  queryPage,
  graphic_list,
  save_or_update,
  Download,
} from "@/api/smart/schedul/b.js";
import { getDisClostDetail } from "@/api/internetSales/projectClarifi.js";
export default {
  mixins: [mixin],
  data() {
    var strengthGrade0Check = (rule, value, callback) => {
      if (this.strengthGrade0 == '') {
        callback(new Error('请选择强度等级'));
      } else {
        callback();
      }
    };
    return {
      dataJson: {},
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      DownloadURL: Download,
      upheader: {
        "access-token": getToken(),
        "user-engineeringId": 1,
      },
      loading: false,
      /*表格数据*/
      table: [
        {
          label: "合同号",
          width: "",
          prop: "contractNo",
          status: true,
        },
        {
          label: "工程名称",
          width: "",
          prop: "engineeringName",
          status: true,
        },
        {
          label: "客户名称",
          width: "",
          prop: "customerName",
          status: true,
        },
        {
          label: "图算总量",
          width: "",
          prop: "graphicTotalNum",
          status: true,
        },
        {
          label: "操作",
          width: "",
          prop: "businessAddress",
          status: true,
        },
      ],
      /*表单页类型，0为无树状，1为有树状，有树状在el-main加上display:flex*/
      pagesType: 0,
      /*添加表单数据*/
      rules: {
        structuralParts: [
          { required: true, message: "请输入结构部位", trigger: "change" },
        ],
        strengthGrade0: [{ validator: strengthGrade0Check, trigger: 'change', }],
        graphicNum: [
          { required: true, message: "请输入图算量", trigger: "change" },
        ],
      },
      strengthGrade0: '', //强度等级
      performanceGrade0: '', //性能等级
      meterialRequirements0: '', //材料要求
      specialRequirements0: '', //特殊要求
      otherRequirements0: '', //其他要求list
      admixtureRequirements0: '', //外加剂要求
      fromDate: {
        typeid: 1,
        structuralParts: '',
        gradeNo: "", //标号
        strengthGrade: "", //强度等级
        graphicNum: '',
        remark: '',
        structureSize: '',
        planStatus: 0,
      },
      companyNatureIdlist: [],
      engineeringId: "",
      id: "",
      ToViewType: false,
      toViewList: [],
      strengthGradeList: [],
      performanceGradeList: [],
      meterialRequirementsList: [],
      specialRequirementsList: [],
      otherRequirementsList: [],
      admixtureRequirementsList: [],
      addDialogTitle: "",
      exportDialog: false,
      titleName: '',
    };
  },
  created() {
    /*存储拷贝的原初始化fromDate数据*/
    this.tableParam = { ...this.tableParam, name: "", linkman: "" };
    this.gettableData();
    getDicType({ code: "enterType" }).then((res) => {
      this.companyNatureIdlist = res.data.items;
    });
  },
  methods: {
    deleteFun(e) {
      this.fromDate = e;
      this.fromDate.status = 0;
      save_or_update(this.fromDate).then((res) => {
        if (res.code == 1001) {
          this.addDialog = false;
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.ToViewFun();
        }
      });
    },
    addFun() {
      this.addDialog = true;
      this.addDialogTitle = "添加";
      this.performanceGrade0 = []
      this.meterialRequirements0 = []
      this.specialRequirements0 = []
      this.otherRequirements0 = []
      this.admixtureRequirements0 = []
      this.$data.fromDate = this.$options.data().fromDate
      this.$nextTick(() => { this.$refs.reffromDate.clearValidate(); })
    },
    upDateFun(e) {
      this.addDialog = true;
      this.addDialogTitle = "修改";
      this.id = e.id;
      this.fromDate = e;
      this.strengthGrade0 = []
      this.performanceGrade0 = []
      this.meterialRequirements0 = []
      this.specialRequirements0 = []
      this.otherRequirements0 = []
      this.admixtureRequirements0 = []
      this.strengthGrade0 = JSON.parse(this.fromDate.strengthGrade)[0].id
      if (this.fromDate.performanceGrade) {
        this.performanceGrade0 = JSON.parse(this.fromDate.performanceGrade).map((v) => v.id)
      }
      if (this.fromDate.meterialRequirements) {
        this.meterialRequirements0 = JSON.parse(this.fromDate.meterialRequirements).map((v) => v.id)
      }
      if (this.fromDate.specialRequirements) {
        this.specialRequirements0 = JSON.parse(this.fromDate.specialRequirements).map((v) => v.id)
      }
      if (this.fromDate.otherRequirements) {
        this.otherRequirements0 = JSON.parse(this.fromDate.otherRequirements).map((v) => v.id)
      }
      if (this.fromDate.admixtureRequirements) {
        this.admixtureRequirements0 = JSON.parse(this.fromDate.admixtureRequirements).map((v) => v.id)
      }
    },
    ToViewFun(e) {
      this.ToViewType = true;
      if (e) {
        this.engineeringId = e.engineeringId;
        this.getDisClostDisAddCostFun(e.engineeringId)
      }
      graphic_list({ engineeringId: this.engineeringId }).then((res) => {
        this.toViewList = res.data;
      });
    },
    exportDialogFun(e) {
      this.titleName = e.engineeringName
      this.engineeringId = e.engineeringId;
      this.exportDialog = true;
    },
    init() {
      /*重置数据*/
      this.tableParam.contractNo = ''
      this.tableParam.customerName = "";
      this.tableParam.engineeringName = "";
      this.gettableData();
    },
    submit() {
      this.$refs.reffromDate.validate((valid) => {
        if (valid) {
          this.fromDate.engineeringId = this.engineeringId;
          //强度等级-开始数据重装
          let name = this.strengthGradeList.find((v) => v.id == this.strengthGrade0).name
          this.fromDate.strengthGrade = JSON.stringify([{ id: this.strengthGrade0, name: name }]);
          //性能等级-开始数据重装
          if (this.performanceGrade0.length > 0) {
            let arr = [];
            this.performanceGrade0.forEach((v) => {
              this.performanceGradeList.forEach((v2) => {
                if (v == v2.id) {
                  arr.push({ id: v, name: v2.name, });
                }
              });
            });
            this.fromDate.performanceGrade = JSON.stringify(arr);
          } else {
            this.fromDate.performanceGrade = ''
          }
          //材料要求-开始数据重装
          if (this.meterialRequirements0.length > 0) {
            let arr = [];
            this.meterialRequirements0.forEach((v) => {
              this.meterialRequirementsList.forEach((v2) => {
                if (v == v2.id) {
                  arr.push({ id: v, name: v2.name, });
                }
              });
            });
            this.fromDate.meterialRequirements = JSON.stringify(arr);
          } else {
            this.fromDate.meterialRequirements = ''
          }
          //特殊要求-开始数据重装
          if (this.specialRequirements0.length > 0) {
            let arr = [];
            this.specialRequirements0.forEach((v) => {
              this.specialRequirementsList.forEach((v2) => {
                if (v == v2.id) {
                  arr.push({ id: v, name: v2.name, });
                }
              });
            });
            this.fromDate.specialRequirements = JSON.stringify(arr);
          } else {
            this.fromDate.specialRequirements = ''
          }
          //其他要求-开始数据重装
          if (this.otherRequirements0.length > 0) {
            let arr = [];
            this.otherRequirements0.forEach((v) => {
              this.otherRequirementsList.forEach((v2) => {
                if (v == v2.id) {
                  arr.push({ id: v, name: v2.name, });
                }
              });
            });
            this.fromDate.otherRequirements = JSON.stringify(arr);
          } else {
            this.fromDate.otherRequirements = ''
          }
          //外加剂要求-开始数据重装
          if (this.admixtureRequirements0.length > 0) {
            let arr = [];
            this.admixtureRequirements0.forEach((v) => {
              this.admixtureRequirementsList.forEach((v2) => {
                if (v == v2.id) {
                  arr.push({ id: v, name: v2.name, });
                }
              });
            });
            this.fromDate.admixtureRequirements = JSON.stringify(arr);
          } else {
            this.fromDate.admixtureRequirements = ''
          }
          save_or_update(this.fromDate).then((res) => {
            if (res.code == 1001) {
              this.addDialog = false;
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.ToViewFun();
              this.gettableData();
            }
          });
        } else {
          return false;
        }
      });
    },
    fileSuccess(res) {
      this.loading = false
      if (res.code == 1001) {
        this.$message({
          dangerouslyUseHTMLString: true,
          message: `本次导入数据成功${res.data.successNum}条，失败<span style="color:red">${res.data.failureNum}</span>条！！！`,
          type: 'success'
        });
        if (res.data.failureNum !== 0) {
          let text = ''
          res.data.errResult.forEach((res) => {
            text = text + res.structuralParts + '：' + res.reason + '；'
          })
          this.$notify.error({
            title: '导入失败信息',
            message: text,
            duration: 0
          });
        }
        this.gettableData();
      } else {
        this.$message.error(res.codeMsg);
      }
    },
    filebefore(file) {
      this.dataJson.engineeringId = this.engineeringId
      this.loading = true
      const isJPG = file.type === 'application/vnd.ms-excel';
      if (!isJPG) {
        this.$message.error('数据上传必须是 xls 格式!');
        this.loading = false
      }
      return isJPG;
    },
    /**查询该工程的强度等级+各项要求+浇筑部位 */
    getDisClostDisAddCostFun(id) {
      getDisClostDetail({ id }).then(res => {
        if (res.code === 1001) {
          this.strengthGradeList = JSON.parse(res.data.strengthGrade);
          this.performanceGradeList = JSON.parse(res.data.performanceRate);
          //材料要求pouringMethodList
          this.meterialRequirementsList = JSON.parse(res.data.materialRequirements);
          //特殊要求
          this.specialRequirementsList = JSON.parse(res.data.specialRequirements);
          //外加剂要求
          this.admixtureRequirementsList = JSON.parse(res.data.admixtureRequirements);
          //其他要求
          this.otherRequirementsList = JSON.parse(res.data.otherRequirements);
          //浇筑方式
          this.pouringMethodList = JSON.parse(res.data.pumpType);
        }
      })
    },
    sizeChange(value) {
      this.tableParam.pageSize = value;
      this.gettableData();
    },
  },
};
</script>

<style lang="scss" scoped>
.table_top {
  color: #008000;
}
.table_top:hover {
  color: #008000 !important;
  opacity: 0.8;
}
.el-input,
.el-select {
  width: 320px;
}
.table_link {
  margin-left: 10px;
  color: $bg_color;
}
.table_link:hover {
  opacity: 0.8;
}
</style>
